<template>
  <div style="margin-top: 25px">
    <div class="ruoyi-but">
      <el-checkbox v-model="propsData.tableProp.addBut" class="ml-12">增</el-checkbox>
      <el-checkbox v-model="propsData.tableProp.delBut" class="ml-12">删</el-checkbox>
      <el-checkbox v-model="propsData.tableProp.editBut" class="ml-12">改</el-checkbox>
      <el-checkbox v-model="propsData.tableProp.queryBut" class="ml-12">查</el-checkbox>
      <el-button type="primary" @click="addFormField" style="margin-left: 25px">添加字段</el-button>
    </div>

    <!--表格字段-->
    <el-table ref="table" :data="propsData.tableProp.tableArray" border style="width: 100%;margin-top: 15px"
              :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
              :default-sort="{prop: 'sort', order: 'ascending'}"
              height="742"
    >
      <el-table-column label="序号" type="index" width="50" align="center" fixed="left"/>
      <el-table-column label="名称" width="170" :show-overflow-tooltip="true" align="center" prop="name">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" placeholder="请输入名称" clearable></el-input>
        </template>
      </el-table-column>
      <el-table-column label="数据类型" width="160" align="center" prop="name">
        <template slot-scope="scope">
          <el-select v-model="scope.row.type" placeholder="请选择数据类型">
            <el-option
                v-for="item in $store.state.tableFieldOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="字段相关配置" width="630" align="center" prop="field">
        <template slot-scope="scope">
          <ul class="design-table-ul">
            <li>
              <template>
                <span>字段</span>
                <el-input v-model="scope.row.field" placeholder="字段"></el-input>
              </template>
              <template v-if="['日期和时间范围','日期范围','月份范围'].includes(scope.row.type)">
                <span>开始字段</span>
                <el-input v-model="scope.row.startField" placeholder="开始字段"></el-input>
                <span>结束字段</span>
                <el-input v-model="scope.row.endField" placeholder="结束字段"></el-input>
              </template>
              <template v-if="['文件上传','图片上传'].includes(scope.row.type)">
                <span>是否多文件</span>
                <el-checkbox v-model="scope.row.singleFile"></el-checkbox>
              </template>

              <template v-if="['单选框','多选框','下拉框'].includes(scope.row.type)">
                <span>数据来源</span>
                <el-select v-model="scope.row.selectProp.dataSources" placeholder="数据来源" style="width: 150px;flex: 0 0 auto">
                  <el-option
                      v-for="item in $store.state.formSelectOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </li>

            <li v-if="['单选框','多选框','下拉框'].includes(scope.row.type)" class="mt-12">
              <template v-if="scope.row.selectProp.dataSources=='别的页面接口'">
                <span>接口名称</span>
                <el-input v-model="scope.row.selectProp.interfaceName" placeholder="接口名称"></el-input>
                <span>label字段</span>
                <el-input v-model="scope.row.selectProp.labelField" placeholder="label字段"></el-input>
                <span>value字段</span>
                <el-input v-model="scope.row.selectProp.valueField" placeholder="label字段"></el-input>
              </template>
              <template v-if="scope.row.selectProp.dataSources=='本页面接口'">
                <span>选择接口</span>
                <el-select v-model="scope.row.selectProp.interfaceName" placeholder="选择接口" style="width: 150px;flex: 0 0 auto">
                  <el-option
                      v-for="item in propsData.apiProp.apiArray2"
                      :key="item.notes"
                      :label="item.notes"
                      :value="item.notes">
                  </el-option>
                </el-select>
                <span>label字段</span>
                <el-input v-model="scope.row.selectProp.labelField" placeholder="label字段"></el-input>
                <span>value字段</span>
                <el-input v-model="scope.row.selectProp.valueField" placeholder="label字段"></el-input>
              </template>
              <template v-if="scope.row.selectProp.dataSources=='自定义'">
                <el-input type="textarea" placeholder="请输入我是文本域" v-model="scope.row.selectProp.text" :autosize="{ minRows: 2, maxRows: 4}" maxlength="30000" show-word-limit/>
              </template>
            </li>
          </ul>
        </template>
      </el-table-column>

      <el-table-column label="基础设置" align="left" prop="required">
        <template slot-scope="scope">
          <div class="design-table-content1">

            <el-checkbox v-model="scope.row.searchField">tabs搜索</el-checkbox>
          </div>
          <div class="design-table-content1">
            <el-checkbox v-model="scope.row.tableSee">表格不显示</el-checkbox>
            <el-checkbox v-model="scope.row.addSee">新增不显示</el-checkbox>
            <el-checkbox v-model="scope.row.editSee">修改不显示</el-checkbox>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="排序" width="70" :show-overflow-tooltip="true" align="center" sortable prop="sort" :sort-method="(a,b)=>{return a.sort - b.sort}">
        <template slot-scope="scope">
          <el-input v-model="scope.row.sort" placeholder="排序"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete el-icon--left" @click="delClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  components: {},
  props: ['propsData'],
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    //添加表格字段
    addFormField() {
      let jsonData = {
        id: new Date().getTime(),
        name: '',//名称
        type: '输入框',//数据类型
        field: '',//字段
        sort: '10',//排序
        searchField: false,//tabs搜索字段
        tableSee: false,//表格不显示 true是
        addSee: false,//新增不显示 true是
        editSee: false,//修改不显示 true是
        //单选框-下拉框-多选框 数据来源
        selectProp: {
          dataSources: '自定义',//单选框-下拉框-多选框 数据来源
          text: `{label:'',value:''},`,
        }
      }
      this.propsData.tableProp.tableArray.push(jsonData);
    },
    //删除字段
    delClick(row) {
      for (let i = 0; i < this.propsData.tableProp.tableArray.length; i++) {
        if (this.propsData.tableProp.tableArray[i] == row) {
          this.propsData.tableProp.tableArray.splice(i, 1);
          return false
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.ruoyi-but {

}
</style>
